<template>
    <div class="my-filter-input">
        <vxe-input mode="text" v-model="column.filters[0].data" placeholder="支持回车筛选" @keyup="keyupEvent" @input="changeOptionEvent"></vxe-input>
    </div>
</template>

<script>
    export default {
        props: {
            params: {
                type: Object,
                default: {},
            }
        },
        data () {
            return {
                column:{filters:[{data:''}]}
            }
        },
        methods: {
            load () {
                const { params } = this
                if (params) {
                    const { column } = params
                    this.column = column;
                }
            },
            changeOptionEvent () {
                const { params } = this
                const option = this.column.filters[0]
                if (params && option) {
                    const { $panel } = params
                    const checked = !!option.data
                    $panel.changeOption(null, checked, option)
                }
            },
            keyupEvent ({ $event }) {
                const { params } = this
                if (params) {
                    const { $panel } = params
                    if ($event.keyCode === 13) {
                        $panel.confirmFilter($event)
                    }
                }
            }
        },
        watch: {
            params: {
                handler(val) {
                    this.column = val.column || {}
                },
                immediate: true
            }
        },
        created () {
            this.load()
        }
    }
</script>

<style scoped>
    .my-filter-input {
        padding: 10px;
    }
</style>
